<template>
    <div class="material-store-group">
        <Item :item="item" v-for="item in props.data" :key="item.id" />
    </div>
</template>
<script setup>
import Item from "../item/P";

const cols = ref(6);

const props = defineProps({
    data: {
        type: Array,
        default: () => [],
    },
});

const onResize = () => {
    if (window.innerWidth >= 1920) {
        cols.value = 6;
    } else if (window.innerWidth < 1440) {
        cols.value = 4;
    } else {
        cols.value = 5;
    }
};

onMounted(() => {
    window.addEventListener("resize", onResize);
    onResize();
});

onUnmounted(() => {
    window.removeEventListener("resize", onResize);
});
</script>
<style lang="scss" scoped>
.material-store-group {
    position: relative;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    .material-store-item {
        width: calc(20% - 8px);
    }
}
</style>
